<!-- 
  下面是父组件html中的代码和参数详解：
  title是设置弹框标题，conText是设置弹框文字内容，id是传递要操作对象的id
 -->
<!-- 
  <Del_com v-model="dialogVisible"  :title="title" :conText="conText" :id="111"></Del_com>
    <el-button plain @click="dialogVisible = true">
        删除按钮
    </el-button>
 -->
<!-- 下面是父组件中的js代码 -->
<!-- 
  const dialogVisible = ref(false)
  const title = ref('删除客户')
  const conText = ref('您确定要删除此客户数据吗？')
 -->

<template>
  <el-dialog :model-value="modelValue" title="Tips" width="400" :before-close="handleClose">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
      </div>
    </template>
    <span>{{ conText }}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emits('update:modelValue', false)" style="width: 48%;
          background-color: #F5F5F5;border-radius: 0.5vh">否</el-button>
        <el-button @click="emits('update:modelValue', false)" style="width: 48%;
          border-radius: 0.5vh;background-color:#EE4E4F;color:white">
          是
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// 父子组件通信的双向绑定
const emits = defineEmits(['update:modelValue'])
defineProps({
  conText: {
    type: String,
    default: '您确定要删除此客户数据吗？'
  },
  title: {
    type: String,
    default: '删除客户'
  },
  id:{
    type: Number,
    required: true,  //设置必传
  },
  modelValue: Boolean,
})

const handleClose = (done: () => void) => {
  emits('update:modelValue', false)
  done()
}
</script>
<style scoped>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

.dialog-footer {
  text-align: center
}
</style>